<template>
	<view class="settings-container">
		<view class="settings-header">
			<text class="settings-title">设置</text>
		</view>
		
		<!-- 设置菜单列表 -->
		<view class="settings-list">
			<!-- 账号与安全 -->
			<view class="settings-group">
				<view class="settings-group-title">账号与安全</view>
				<view class="settings-item" @click="goToProfile">
					<text class="settings-item-title">个人信息</text>
					<text class="settings-item-arrow">></text>
				</view>
				<view class="settings-item" @click="goToChangePassword">
					<text class="settings-item-title">修改密码</text>
					<text class="settings-item-arrow">></text>
				</view>
				<view class="settings-item" @click="goToBindPhone">
					<text class="settings-item-title">手机绑定</text>
					<text class="settings-item-value">{{ bindPhone || '未绑定' }}</text>
					<text class="settings-item-arrow">></text>
				</view>
			</view>
			
			<!-- 通知与隐私 -->
			<view class="settings-group">
				<view class="settings-group-title">通知与隐私</view>
				<view class="settings-item">
					<text class="settings-item-title">推送通知</text>
					<switch :checked="notificationEnabled" @change="toggleNotification" color="#667eea" />
				</view>
				<view class="settings-item">
					<text class="settings-item-title">订单状态通知</text>
					<switch :checked="orderNotificationEnabled" @change="toggleOrderNotification" color="#667eea" />
				</view>
				<view class="settings-item">
					<text class="settings-item-title">优惠促销通知</text>
					<switch :checked="promotionNotificationEnabled" @change="togglePromotionNotification" color="#667eea" />
				</view>
				<view class="settings-item">
					<text class="settings-item-title">隐私设置</text>
					<text class="settings-item-arrow">></text>
				</view>
			</view>
			
			<!-- 通用设置 -->
			<view class="settings-group">
				<view class="settings-group-title">通用</view>
				<view class="settings-item" @click="clearCache">
					<text class="settings-item-title">清除缓存</text>
					<text class="settings-item-value">{{ cacheSize }}</text>
					<text class="settings-item-arrow">></text>
				</view>
				<view class="settings-item" @click="goToAbout">
					<text class="settings-item-title">关于我们</text>
					<text class="settings-item-arrow">></text>
				</view>
				<view class="settings-item">
					<text class="settings-item-title">当前版本</text>
					<text class="settings-item-value">v1.0.0</text>
				</view>
			</view>
			
			<!-- 退出登录 -->
			<view class="settings-group" v-if="isLoggedIn">
				<button class="logout-btn" @click="logout">退出登录</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { userApi } from '@/api/index.js';
	import common from '@/utils/common.js';
	import storage from '@/utils/storage.js';
	
	// 响应式数据
	const isLoggedIn = ref(false);
	const bindPhone = ref('');
	const cacheSize = ref('0KB');
	const notificationEnabled = ref(true);
	const orderNotificationEnabled = ref(true);
	const promotionNotificationEnabled = ref(false);
	
	// 生命周期钩子
	onMounted(() => {
		checkLoginStatus();
		loadUserSettings();
		calculateCacheSize();
	});
	
	// 检查登录状态
	const checkLoginStatus = () => {
		const token = storage.getToken();
		isLoggedIn.value = !!token;
		
		if (isLoggedIn.value) {
			const userInfo = storage.getUserInfo();
			if (userInfo && userInfo.phone) {
				// 手机号脱敏处理
				bindPhone.value = userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			}
		}
	};
	
	// 加载用户设置
	const loadUserSettings = () => {
		// 从本地存储加载用户设置
		const settings = uni.getStorageSync('userSettings') || {};
		notificationEnabled.value = settings.notificationEnabled !== undefined ? settings.notificationEnabled : true;
		orderNotificationEnabled.value = settings.orderNotificationEnabled !== undefined ? settings.orderNotificationEnabled : true;
		promotionNotificationEnabled.value = settings.promotionNotificationEnabled !== undefined ? settings.promotionNotificationEnabled : false;
	};
	
	// 计算缓存大小
	const calculateCacheSize = () => {
		// 模拟计算缓存大小
		setTimeout(() => {
			cacheSize.value = '3.2MB';
		}, 500);
	};
	
	// 切换通知设置
	const toggleNotification = (e) => {
		notificationEnabled.value = e.detail.value;
		saveSettings();
	};
	
	const toggleOrderNotification = (e) => {
		orderNotificationEnabled.value = e.detail.value;
		saveSettings();
	};
	
	const togglePromotionNotification = (e) => {
		promotionNotificationEnabled.value = e.detail.value;
		saveSettings();
	};
	
	// 保存设置
	const saveSettings = () => {
		const settings = {
			notificationEnabled: notificationEnabled.value,
			orderNotificationEnabled: orderNotificationEnabled.value,
			promotionNotificationEnabled: promotionNotificationEnabled.value
		};
		uni.setStorageSync('userSettings', settings);
		common.showToast('设置已保存');
	};
	
	// 清除缓存
	const clearCache = async () => {
		const confirmed = await common.showConfirm('确定要清除缓存吗？');
		if (!confirmed) return;
		
		// 模拟清除缓存操作
		uni.showLoading({
			title: '正在清除...'
		});
		
		setTimeout(() => {
			uni.hideLoading();
			cacheSize.value = '0KB';
			common.showSuccess('清除成功');
		}, 1000);
	};
	
	// 退出登录
	const logout = async () => {
		const confirmed = await common.showConfirm('确定要退出登录吗？');
		if (!confirmed) return;
		
		try {
			await userApi.logout();
			storage.clearUserData();
			common.showSuccess('退出成功');
			
			// 跳转到首页
			uni.switchTab({
				url: '/pages/index/index'
			});
		} catch (error) {
			console.error('退出登录失败:', error);
			// 即使API调用失败，也清除本地数据
			storage.clearUserData();
			common.showSuccess('退出成功');
			
			// 跳转到首页
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
	};
	
	// 跳转函数
	const goToProfile = () => {
		if (!isLoggedIn.value) {
			uni.navigateTo({ url: '/pages/login/login' });
			return;
		}
		uni.navigateTo({ url: '/pages/user/profile' });
	};
	
	const goToChangePassword = () => {
		if (!isLoggedIn.value) {
			uni.navigateTo({ url: '/pages/login/login' });
			return;
		}
		common.showToast('此功能暂未开放');
	};
	
	const goToBindPhone = () => {
		if (!isLoggedIn.value) {
			uni.navigateTo({ url: '/pages/login/login' });
			return;
		}
		common.showToast('此功能暂未开放');
	};
	
	const goToAbout = () => {
		uni.navigateTo({ url: '/pages/about/about' });
	};
</script>

<style scoped>
	.settings-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 40rpx;
	}
	
	.settings-header {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 60rpx 40rpx 40rpx;
		color: #fff;
	}
	
	.settings-title {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.settings-list {
		padding: 20rpx;
	}
	
	.settings-group {
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}
	
	.settings-group-title {
		font-size: 24rpx;
		color: #999;
		padding: 20rpx;
		background: #f9f9f9;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.settings-item {
		display: flex;
		align-items: center;
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.settings-item:last-child {
		border-bottom: none;
	}
	
	.settings-item-title {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}
	
	.settings-item-value {
		font-size: 26rpx;
		color: #999;
		margin-right: 10rpx;
	}
	
	.settings-item-arrow {
		font-size: 24rpx;
		color: #ccc;
	}
	
	.logout-btn {
		width: 100%;
		background: #ff4757;
		color: #fff;
		border: none;
		border-radius: 0;
		padding: 25rpx;
		font-size: 28rpx;
	}
</style> 